import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {Image, View} from '@tarojs/components'
import {http} from "../../utils/http";
import {
  TARO_ENV,
  MAP_SCENIC_MAP, RESOURCE_URL,
} from "../../constants/api";
import {h5Wx} from "../../utils/h5.service";
import MapContainer from "./components/MapContainer";
import "./index.scss";
import {GetRequest, vcmonitor} from "../../utils/tools";

export default class MapNavigation extends Component {
  state: {
    scenicBoundary: any
    scenicList: object
    labelList: any
    active: number
    loadStatus: string
  } = {
    scenicBoundary: null,
    scenicList: [],
    labelList: [],
    active: 0,
    loadStatus: 'loading'
  }

  async UNSAFE_componentWillMount() {
    vcmonitor(this);
    if(TARO_ENV === 'h5') {
      await h5Wx.getConfig();
    }else {
      //
    }
    this.getDetail()
  }
  componentDidShow() {}
  // 获取map组件 this 引用
  getMapNavigation(ref) {
    this.mapNavigationCmp = ref;
  }
  async getDetail(id?) {
    this.setState({loadStatus: 'loading'})
    await Taro.showLoading({title: '数据加载中...'})
    /*if (Taro.getCurrentInstance().router.params.uuid) {
      Taro.showToast({
        title: '未找到景区',
        icon: 'none'
      });
      Taro.navigateBack({
        delta:1
      })
      return false
    }*/
    const params = {
      uuid: Taro.getCurrentInstance().router.params.customUuid || ''
    }
    if (id) {
      params.category_id = id
    }
    const res = await http.MPost(MAP_SCENIC_MAP, params)
    if (res) {
      if (!id && res.data.branch && res.data.branch.length > 0) {
        params.category_id = res.data.branch[0].id
      }
      const detail = await http.MPost(MAP_SCENIC_MAP, params)
      const scenicArray = detail.data.scenic
      const scenicList = []
      if (scenicArray && scenicArray.length > 0) {
        for (let i=0; i< scenicArray.length; i++) {
          for (let j=0; j<scenicArray[i].branch.length; j++) {
            scenicList.push(scenicArray[i].branch[j])
          }
        }
      }
        Taro.hideLoading()
        this.setState({
          scenicBoundary: detail.data.custom,
          labelList: detail.data.branch,
          scenicList: scenicList,
          loadStatus: 'noMore'
        })
      }
  }
  choiceLabel(index, id) {
    this.getDetail(id)
    this.setState({
      active: index
    })
  }

  render() {
    const {
      scenicBoundary,
      scenicList,
      labelList,
      active,
      loadStatus
    } = this.state;
    return (
      <View className='map-navigation-page' style='height: 800px !important'>
        {loadStatus !== 'loading' && scenicBoundary && <View className='map-area' style='height: 100% !important'>
            <MapContainer
              boundary={scenicBoundary}
              scenicList={scenicList || []}
            />
        </View>}
        <View className='label-group'>{labelList && labelList.length > 0 && labelList.map((item, index) =>
          <View className={`label ${active === index ? 'active' : ''}`} onClick={this.choiceLabel.bind(this, index, item.id)}>
            {!!item.img && <Image
              className='icon-image'
              src={RESOURCE_URL + item.img}
              mode='widthFix'
            />}
            {item.name}
          </View>)
        }</View>
      </View>
    )
  }
}
